@use 'sass:math';

// 输入框
.el-input__inner {
    border: solid 1px $--btn-border-color;
    border-radius: 2px;
    padding: 0 8px;
    height: 32px;
    line-height: calc(32px - 2px);
    color: $font;
    &:hover {
        border-color: $border;
    }
    &:focus {
        border-color: $primary;
        box-shadow: 0 0 4px 2px $--selected-primary;
    }
}
.el-input--small {
    font-size: 14px;
}
// 前缀
.el-input-group__prepend {
    border-color: $--btn-border-color;
    color: $--text-dim;
    background-color: $background;
    border-radius: 2px 0 0 2px;
}

// 后缀
.el-input-group__append {
    border-color: $--btn-border-color;
    color: $--text-dim;
    background-color: $background;
    border-radius: 0 2px 2px 0;
}
.el-input {
    .el-input__icon.el-input__validateIcon.el-icon-circle-close {
        display: none;
    }
    &.el-input--prefix {
        .el-input__prefix {
            top: 0;
            left: 4px;
            display: flex;
            align-items: center;
            color: $--text-dim;
            i {
                width: 24px;
                height: 24px;
                display: block;
                line-height: 32px;
                //mask-image: url(../assets/svg-icon/common_user.svg);
                &::before {
                    content: none;
                }
            }
        }
    }
    &.el-input--suffix {
        .el-input__suffix {
            display: flex;
            align-items: center;
            right: 4px;
            color: $--text-dim;
            z-index: 1;

            .el-input__suffix-inner {
                height: 24px;
                align-items: center;
                display: flex;
                order: 1;

                :nth-child(1) {
                    order: 3;
                }
                :nth-child(2) {
                    order: 2;
                }
                .el-input__count {
                    order: 1;
                    background-color: $white;
                }
                .el-input__icon {
                    height: 24px;
                    width: 24px;

                    &.el-input__clear:not(.el-icon-view) {
                        width: 24px;
                        height: 24px;
                        background-color: $--text-dim;
                        mask-image: url("../assets/svg-icon/common_close_f.svg");
                        position: relative;
                        z-index: 10;
                        &::before {
                            position: absolute;
                            width: 24px;
                            height: 24px;
                            top: 0;
                            left: 0;
                            background-color: $white;
                            content: none;
                        }
                    }
                }
            }
        }
    }

    // 禁用
    &.is-disabled {
        .el-input__inner {
            border-color: $--btn-border-color;
            background-color: $background;
            color: $--text-disabled;
        }
        .el-input__suffix {
            .el-input__icon {
                //考虑远程搜索时会多这个类，没有下拉选项
                &:not(.el-icon-) {
                    background-color: $--text-disabled;
                }
            }
        }
        .el-input-group__prepend,
        .el-input-group__append {
            color: $--text-disabled;
        }
    }
}

.el-input-number__decrease,
.el-input-number__increase {
    color: $--text-dim;
    &.is-disabled {
        color: $--text-disabled;
    }
}
// 文本域
.el-textarea__inner {
    padding: 6px 8px;
    border: 1px solid $border;
    border-radius: 2px;
    height: var(--textarea-height, "auto");
    font-size: 14px;
    color: $font;
    line-height: 20px;
    &:focus {
        border-color: $primary;
        box-shadow: 0 0 4px 2px $--selected-primary;
    }
}
.el-input .el-input__count {
    color: getColorVar(--font, 0.5);
    .el-input__count-inner {
        padding: 0 3px;
        line-height: 20px;
        font-size: 12px;
        background-color: transparent;
    }
}
.el-textarea .el-input__count {
    bottom: 6px;
    line-height: 20px;
    color: getColorVar(--font, 0.5);
    background-color: $white;
}
